<template>

	<view class="body-box">
		<uni-nav-bar left-icon="back" class="nav_bar" fixed="true" backgroundColor="#fff" color="#808080"
			statusBar='true' @clickLeft="onNarLeftClick()">
			<view class="bar-title">登录</view>
		</uni-nav-bar>
		<view class="logo-content">
			<!-- 图标logo -->
			<view class="login-logo-icon">
				<image class='login-logo-image' :style="{
					height: '180rpx',
					width: '180rpx',
					borderRadius: '60rpx' 
				  }" :src="'../../static/imgs/logo.png'" :mode="'aspectFit'"></image>
			</view>
			<!-- 文字logo -->
			<view class='login-logo-image-content'>
				<image class='login-logo-image' :style="{
					height: '50rpx',
					width: '220rpx',
				  }" :src="'../../static/imgs/logo-text.png'"></image>
			</view>
		</view>
		<!-- 微信一键登录 -->
		<view class='login-form-button-content'>
			<view class='login-form-button' @click="onLoginButtonClidk()">
				<view class='login-form-button-text'>{{isLoading?'正在登陆':'微信一键登录'}}</view>
			</view>
		</view>
		<view class='login-otherlogin' @click="onOtherLoginTextClick()">其他登录方式</view>
		<!-- 用户协议和隐私政策 -->
		<view class='login-useragreement-content'>

			<checkbox :color="MainColor" class='login-useragreement' @click="onCheckBoxClick()" :checked="agreest">
			</checkbox>已阅读并同意<text @click.stop="onUserProtocolClick" 
			class='login-agreement1'>《用户协议》</text>和<text @click.stop="onPrivacyPolicyClick"
			 class='login-agreement2'>《隐私政策》</text>
		</view>
		<!-- 出品方 -->
		<view class='hbutliving-content'>
			<view class='hbutliving-logo'>
				<image class='login-logo-image' :style="{
				height: '60rpx',
				width: '60rpx',
			  }" :src="'../../static/imgs/hbutliving-logo.png'"></image>
			</view>
			<view class='hbutliving-text'>
				湖工Living 出品
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	import {
		request
	} from '@/utils/request';
	import {
		REQUEST_SUCCEEDED_CODE,
		MainColor
	} from '@/common/constants';
	import {REFRESH_USERINFO} from "@/common/globalMsgKeys";
	/**
	 * login 登录界面-用于微信登录
	 * @description 登录界面-用于微信登录
	 * @Author: 穆兰
	 * @Date: 2022/1/5
	 * @LastEditors: 穆兰
	 * @LastEditTime: 2022/1/10
	 */
	export default {
		data() {
			return {
				isLoading: false,
				agreest: false,
				MainColor
			}
		},
		methods: {
			onNarLeftClick() {
				uni.navigateBack({
					delta: 1
				});
			},
			/**
			 *@description 点击其他登录的文字
			 */
			onOtherLoginTextClick() {
				uni.navigateTo({
					url: "./account-login"
				})
			},
			
			/**
			 * @description 点击选择框
			 */
			onCheckBoxClick() {
				this.agreest = !this.agreest
				console.log("this.agreest", this.agreest)
			},
			/**
			 * @description 点击用户协议文字
			 */
			onUserProtocolClick(){
				uni.navigateTo({
					url: "/pages/login/bugu-use-protocol/bugu-use-protocol"
				})
			},
			/**
			 * @description 点击隐私政策文字
			 */
			onPrivacyPolicyClick(){
				uni.navigateTo({
					url: "/pages/login/bugu-privacy-policy/bugu-privacy-policy"
				})
			},
			/**
			 * @description 点击登录按钮
			 */
			onLoginButtonClidk() {
				if (this.isLoading) {
					return
				}
				if (this.agreest) {
					let _this = this
					uni.login({
						provider: 'weixin',
						success: function(res) {
							if (res.code) {
								_this.code = res.code
								console.log(res.code)
								try {
									let BeInvitedCode = uni.getStorageSync('BeInvitedCode')
									console.log("BeInvitedCode",BeInvitedCode)
									_this.tryToLogin(res.code, BeInvitedCode)
									uni.setStorage({
										key: 'BeInvitedCode',
										data: null
									})
								} catch {
									_this.tryToLogin(res.code)
								}

							} else {
								console.log('登录失败！' + res.errMsg)
							}
						}
					})
				} else {
					uni.showToast({
						title: '请先同意《用户协议》和《隐私政策》',
						icon: 'none'
					})
				}
			},

			/**
			 * @description 登录
			 * @param code 微信登录获取的凭证
			 * @param BeInvitedCode 他人的邀请码
			 */
			async tryToLogin(code: String, BeInvitedCode ? : String) {
				uni.showLoading({
					title: '正在登陆'
				})
				this.isLoading = true

				try {
					let res = await request({
						data: {
							method: 'GET',
							group: 'user',
							action: 'login',
							data: BeInvitedCode ? {
								inviteCode: BeInvitedCode,
								code: code
							} : {
								code: code
							},
							header: {
								'content-type': 'application/x-www-form-urlencoded' // 默认值
							},
						}
					});
					this.isLoading = false

					if (res.data.code === REQUEST_SUCCEEDED_CODE) {
						console.log("登录成功")
						await uni.setStorage({
							key: 'token',
							data: res.data.data.token
						})
						await uni.setStorage({
							key: 'userInfo',
							data: res.data.data.userInfo
						})
						console.log(res.data.data)
						uni.showToast({
							title: '登录成功',
							icon: 'success'
						})
						uni.$emit(REFRESH_USERINFO,{needRefresh:true})
						uni.navigateBack({});
					} else {
						console.log(res)
					}
				} catch {
					uni.showToast({
						title: '登录失败，请稍后再试',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.body-box {
		position: relative;
		min-height: 100vh;
		width: 100vw;
		background: linear-gradient(#abeefe, #fefffe);
		background-color: transparent;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		background-image: url("");
	}

	.logo-content {}

	.login-logo-icon {
		margin: 0 auto;
		margin-top: 20%;
		width: fit-content;
		height: fit-content;
		text-align: center;
	}

	.login-logo-image-content {
		width: 100%;
		text-align: center;
		margin-top: 5%;
	}

	.login-form-button-content {
		margin-top: 27vh;
	}

	.login-form-button {
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 500rpx;
		height: 80rpx;
		border-radius: 45rpx;
		margin-bottom: 3.6rpx;
		background-color: #00ce67;
		font-size: 29rpx;
		color: white;
		border: #fefffe;
	}

	.login-form-button-text {
		font-size: 28rpx;
	}

	.login-otherlogin {
		width: fit-content;
		font-size: 27rpx;
		margin: 0 auto;
		margin-top: 64rpx;
		background-color: transparent;
		color: #4e4e4e;
	}

	.login-useragreement-content {
		display: flex;
		align-items: center;
		justify-content: center;
		width: fit-content;
		margin: 0 auto;
		margin-top: 100rpx;
		color: #ffffff;
	}

	.login-useragreement {
		transform: scale(0.7);
		flex-grow: 1;
		font-size: 20rpx;
	}

	.login-agreement1 {
		color: #0083fb;
	}

	.login-agreement2 {
		color: #0083fb;
	}

	.hbutliving-content {
		margin-top: 40rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		.login-logo-image {
			border-radius: 10rpx;
		}

		.hbutliving-text {
			margin-left: 20rpx;
			color: #ffffff;
			font-size: medium;
		}
	}
</style>
